<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的事件修饰符</title>
    <!-- 1.导入vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器-->
<div id="app">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- 阻止默认事件（常用） a标签的跳转 -->
	<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    <!-- 阻止事件冒泡（常用） -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息2</button>
        <!-- 修饰符可以连续写 -->
        <!-- <a href="http://www.tofacebook.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
    </div>
    <!-- 事件只触发一次（常用） -->
    <button @click.once="showInfo">点我提示信息3</button>
</div>
</body>
<!-- 3.new Vue()  构造Vue实例对象 -->
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#app',
        //函数式 的数据data定义
        data() {
            return {
                name:'李伟'
            }
        },
        methods:{
            showInfo(){
              alert("点我提示信息")  
            }
        }
    })
</script>
</html>